<template>
  <div>
    <el-form-item :style="{ 'width': formItem.width + 'px' }">
      <template #label>
        <formDesignLabel :formItem="formItem" :readonly="true" />
      </template>
      <formDesignDescription :formItem="formItem" />
      <div class="select-setting">
        <el-select v-model="value" placeholder="选择省" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-if="formItem.district > 1" v-model="value" placeholder="选择市" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-if="formItem.district > 2" v-model="value" placeholder="选择区" disabled>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </el-form-item>
  </div>
</template>
<script setup>
import { ref, defineProps, computed } from 'vue'
import formDesignLabel from "@/views/form/manage/design/components/formDesignLabel.vue";
import formDesignDescription from "@/views/form/manage/design/components/formDesignDescription.vue";
const props = defineProps({
  formItem: {
    type: Object,
  },
})
const formItem = computed(() => { return props.formItem })
const value = ref('')

const options = ref([])

</script>

<style scoped lang='scss'>
.select-setting{
  display: flex;
  width: 100%;
  .el-select{
    width: calc((100% - 20px) / 3);
  }
  .el-select:not(:last-child){
    margin-right: 10px;
  }
}
</style>